import React from "react";
import styles from '../DvEditor/toolbar/index.module.scss';
import classnames from 'classnames';
import {IconFont} from '@/components';
import {EnumChartActions} from "@/pages/dv/constants/EnumHeaderToolbar";
import {EE} from "@/utils";
import EnumOnFire from "@/pages/dv/constants/EnumOnFire";
import dvTool from "@/pages/dv/dvTool";
import {DoubleLeftOutlined} from '@ant-design/icons'


interface IProps {
  onClose(): void
}

interface IState {
  panelCharts: any,
  selectedKey: string,
  dvOption: DV.IOption
}

/**
 * 图层仪表盘
 * @param panelData
 * @constructor
 */
export default class LayerManage extends React.PureComponent<IProps, IState> {

  constructor(props: IProps) {
    super(props);
    this.state = {
      panelCharts: dvTool.charts,
      selectedKey: dvTool.selectedChartKey,
      dvOption: dvTool.dvOption
    }
  }

  componentDidMount(): void {
    EE.on(EnumOnFire.updateChart, (chart: object) => {
      this.forceUpdate()
    });

    EE.on(EnumOnFire.deleteChart, () => {
      this.forceUpdate()
    });

    EE.on(EnumOnFire.updateDvOption, (dvOption: object) => {
      this.forceUpdate()
    });

    EE.on(EnumOnFire.selectedChartKey, (uid: string) => {
      this.setState({
        selectedKey: uid || ''
      });
    })
  }


  /**
   * 选中图表
   */
  selectedChart = (uid: string = '') => {
    dvTool.selectedChart(uid);
  }

  isOverflowBorder(direction: string, chartOption: any){
    const {left, top, width, height} = chartOption;
    const dvW = this.state.dvOption.width;
    const dvH = this.state.dvOption.height;
    if(left + width <= 0 || left >= dvW || top + height <=0 || top >= dvH){
      return true
    }

    switch (direction) {
      case 'left':
        return left < 0
      case 'right':
        return left + width > dvW
      case 'bottom':
        return top + height > dvH
      case 'top':
        return top < 0
    }

    return false;
  }

  render(): React.ReactNode {

    const {panelCharts, selectedKey} = this.state;
    return <div className={styles.siderPanelBox}>
      <div className={styles.title}>
        <DoubleLeftOutlined onClick={this.props.onClose} className={styles.close}/>
        <span>图层管理</span>
      </div>
      <ul className={styles.chartsPanel}>
        {
          Object.values(panelCharts).map((chart: DV.IChart) => <li
            key={chart.uid}
            // title={value.label}
            onClick={() => this.selectedChart(chart.uid)}
            className={classnames({
              [styles.selected]: selectedKey === chart.uid,
              [styles.warnLeft]: this.isOverflowBorder('left', chart),
              [styles.warnTop]: this.isOverflowBorder('top', chart),
              [styles.warnBottom]: this.isOverflowBorder('bottom', chart),
              [styles.warnRight]: this.isOverflowBorder('right', chart),
            })}
          >
            <div>{chart.name}</div>
            <div className={styles.actions}>

            </div>
          </li>)
        }
      </ul>
    </div>
  }


}
